<script lang="ts" setup>
import infoCard from '@/views/component/card/infoCard.vue'
import {getNotesByPageAPI} from '@/apis/notes'
import {ref} from "vue";
import { computedAsync } from '@vueuse/core'
import { Search } from '@element-plus/icons-vue'
import postNote from '@/views/common/postNote.vue'
import router from '@/router/index'
import {ElMessage} from "element-plus";

const pageSize=ref(50)
const currentPage=ref(1)
const total=ref(0)
const isShow=ref(false)
const dialogVisible = ref(false)
//获取分页后的数据
const notesList= computedAsync( async ()=>{
  return await getNotesByPageAPI(pageSize.value,currentPage.value).then(res=>{
    total.value=res.data.total
    isShow.value=true
    return res.data.list
  })
})

const keyWord=ref('')

const handlePostClick = () => {
  dialogVisible.value = true
}

const handleSearch=()=>{
  if(keyWord.value===''){
    ElMessage.warning('请输入搜索内容')
    return
  }
  router.push(`/search/?keyword=${keyWord.value}`)
}
</script>


<template>
  <div class="banner">
    <img src="@/assets/imgs/banner/banner1.jpg" class="banner-img" alt="">
  </div>
  <div class="header">
    <div class="left">
      <el-input 
        class="search-input"
        placeholder="请输入关键词"
        v-model="keyWord">
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-button type="primary" class="action-button" @click="handleSearch">搜索</el-button>
      <el-button type="danger" class="action-button" @click="handlePostClick">发帖子</el-button>
    </div>
    <div class="right">

    </div>

  </div>

  <div class="body">
    <div class="cardBox" v-if="isShow">
      <infoCard 
        v-for="(item,index) in notesList" 
        v-model="notesList[index]"
        :key="index"
        class="info-card">
      </infoCard>
    </div>
    <div v-else>
      <el-skeleton style="width: 100%" direction="vertical" alignment="flex-start" :loading="loading" animated class="content-skeleton">
        <template #template >
          <el-skeleton-item v-for="item in 8" variant="rect" style="width: 320px; height: 200px; margin-right: 10px;margin-bottom: 10px;border-radius: 15px" />
        </template>
      </el-skeleton>

    </div>
  </div>

  <div class="footer">
    <el-pagination
      class="pagination"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[5, 10, 20, 50]"
      layout="sizes, prev, pager, next, jumper"
      :total="total"/>
  </div>

  <el-dialog
    v-model="dialogVisible"
    title="发布帖子"
    width="50%"
    :close-on-click-modal="false"
    :show-close="true"
  >
    <postNote :mode="'post'"/>
  </el-dialog>

</template>

<style scoped>
.banner {
  margin-bottom: 20px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.banner-img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.banner-img:hover {
  transform: scale(1.02);
}

.header {
  width: 100%;
  height: 70px;
  padding: 15px 20px;
  display: flex;
  flex-direction: row;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.left {
  width: 50%;
  display: flex;
  align-items: center;
  gap: 15px;
}

.search-input {
  width: 300px;
}

.action-button {
  height: 40px;
  font-size: 16px;
  padding: 0 25px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.action-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.body {
  margin: 30px 0;
  min-height: 400px;
}

.cardBox {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
  padding: 10px;
}

.info-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.footer {
  width: 100%;
  margin: 30px 0;
}

.pagination {
  padding: 15px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.right {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>